<template>
  <div class="home">
       <header>
         <img src="/top.png" alt="">
         <p>
           <span v-for="v,i in dao" :key='i' :class="dao_num==v.id?'on':''" @click="daoclick(v)">{{v.name}}</span>
           
         </p>
       </header>

       <nav>
         <input type="text" placeholder="请输入关键字" v-model="name" @keyup="change_cont">
       </nav>

       <div class="zhe">
           <p v-for="v,i in list_sou" :key='v.id'>{{v.name}}</p>
       </div>

       <section>
         <div class="left">
            <ul>
              <li v-for="v,i in data" :key='i' :class="num==i?'active':''" @click="tiaoClick(i,v)">{{v.tit}}</li>
            </ul>
         </div>

         <div class="right">
             <div v-for="v,i in list" :key='i'>
                  <img :src="v.img" alt="">
                  <p><span>{{v.name}}</span><span>{{v.datatype}}</span></p>
             </div>
         </div>
       </section>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {getsearch,getsearchPost,getdatalist} from '@/api/index.js'
import axios from'axios';
export default {
  name: 'Home',
  components: {
   
  },
  data() {
    return {
      data:[],//所有的json数据
      num:0,//判断要点击的内容 
      list:[],//该内容下的内容
      name:'',//输入框里值
      list_sou:[],//搜索输入框里的内容  拿到的值
      dao:[//导航
        {
          id:0,
          name:'分',
          tab:'',
        },
        {
          id:1,
          name:'登',
          tab:'',
        },
        {
          id:2,
          name:'搜',
          tab:'',
        },
        {
          id:3,
          name:'侧',
          tab:'',
        },
        {
          id:4,
          name:'旋',
          tab:'',
        },
      ],
      dao_num:0,//导航的判断
    }
  },
  created(){
    console.log(process.env.VUE_APP_BASE_API);
      this.getMap();//地图
      this.getdata();//json内容  有问题 用axios 
      //获取json内容
      axios.get('/list.json').then((ret) => {
        console.log(ret.data);
        this.data=ret.data.type;
        this.list=ret.data.type[this.num].datainfo;
      })
  },
  methods: {
    async getMap(){//地图
        const params={
          location:'116.473168,39.993015',
          extensions:'all',
        };
        const result=await getsearch(params);
          console.log(result)
    },
     async getdata(){  //json内容 有点问题 用axios 
        const result=await getdatalist();
          console.log(result)
    },
    tiaoClick(index,item){//点击左侧边栏的内容 切换右边的内容
        this.num=index;
        this.list=item.datainfo;
        console.log(this.num,this.list)
    },
    change_cont(){//输入框发生改变
     
      let zhe=document.querySelector('.zhe');
      getsearchPost({keywords:this.name}).then(res=>{
        console.log(res);
        this.list_sou=res.data.tips;
      }).catch(err=>{
        console.log(err);
      })
      if(this.name==''){//遮罩层显示隐藏
         zhe.style.display='none';
      }else{
        zhe.style.display='block';
      }
    },
    daoclick(val){
       this.dao_num=val.id;
    }
  },
}
</script>


<style lang="less">
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .home{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      font-size: 0.24rem;

      header{
        width: 100%;
        background: #f9f9f9;
        display: flex;
        align-items: center;
        img{
          width: 50%;
          height: auto;
          display: block;
        }

        p{
          width: 60%;
          padding: 0 0.2rem;
          padding-left: 0.4rem;
          display: flex;
          justify-content: space-around;
          align-content: center;
          span{
             font-size: 0.3rem;
             font-weight: bold;
          }
          .on{
            color: orange;
          }
        }
      }

      nav{
        width: 100%;
        padding: 0.1rem 0.2rem;
        background: #f1f1f1;
        border-top: 2px solid gainsboro;

        input{
          width: 100%;
          border: 1px solid gainsboro;
          outline: none;
          font-size: 0.25rem;
          padding: 0.1rem;
        }
      }

      section{
        flex: 1;
        overflow: auto;
        border-top: 2px solid gainsboro;

        .left{
          width: 25%;
          height: 100%;
          float: left;
          overflow: auto;

          ul{
             width: 100%;
             height: 100%;

             li{
               list-style: none;
               width: 100%;
               height: 1.2rem;
               display: flex;
               justify-content: center;
               align-items: center;
               font-size: 0.35rem;
               border-left: 2px solid transparent;
               border-bottom: 1px solid gainsboro;

             }
             .active{
               border-left: 2px solid skyblue;
               background: #f1f1f1;
             }
          }
        }
         .left::-webkit-scrollbar{
          display: none;
        }

        .right{
          width: 75%;
          height: 100%;
          float: right;
          overflow: auto;

          >div{
            width: 100%;
            height: 1.2rem;
            padding: 0 0.2rem;
            border-bottom: 1px solid gainsboro;
            background: #f1f1f1;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img{
              width: 1rem;
              height: auto;
              display: block;
            }
            p{
               flex: 1;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding-left: 0.1rem;
               font-size: 0.26rem;

               span:last-child{
                  color: gray;
                  font-size: 0.24rem;
               }
            }
          }

        }
        .right::-webkit-scrollbar{
          display: none;
        }

      }
      section::-webkit-scrollbar{
        display: none;
      }

      .zhe{
        width: 94%;
        height: 5rem;
        position: fixed;
        top: 1.4rem;
        left: 3%;
        background: rgba(0,0,0,0.5);
        display: none;
        overflow: auto;

        p{
          width: 100%;
          padding: 0.1rem 0.2rem;
          color: white;
          text-align: left;
          padding-left: 0.3rem;
          line-height: 0.6rem;
          font-size: 0.26rem;
          border-bottom: 1px solid white;

        }
      }
       .zhe::-webkit-scrollbar{
        display: none;
      }

    }
</style>